<template>
    <a-card title="微信支付参数配置" :bordered="false">

        <div class="box">


            <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">


                <a-form-model-item label="商户名称" prop="mchName" ref="mchName" help="请填写微信支付的商户名称">
                    <a-input v-model="form.mchName"
                             placeholder="请填写微信支付的商户名称"

                             @blur=" () => { $refs.mchName.onFieldBlur(); } "/>
                </a-form-model-item>
                <a-form-model-item label="商户ID" prop="mchId" ref="mchId" help="请填写微信支付的商户ID">
                    <a-input v-model="form.mchId"
                             placeholder="商户ID"

                             @blur=" () => { $refs.mchId.onFieldBlur(); } "/>
                </a-form-model-item>

                <a-form-model-item label="签名秘钥" prop="mchKey" ref="mchKey">
                    <a-input v-model="form.mchKey"
                             placeholder="请填写微信支付的商户秘钥"

                             @blur=" () => { $refs.mchKey.onFieldBlur(); } "/>
                </a-form-model-item>
                <a-form-model-item label="公众号APPID" prop="mpAppId" ref="mpAppId" help="适用于微信公众号发起支付调用">
                    <a-input v-model="form.mpAppId"
                             placeholder="请填写绑定的微信公众号的APPID"

                             @blur=" () => { $refs.mpAppId.onFieldBlur(); } "/>

              <p class="text-danger"> 注意：使用公众号支付 需要添加授权目录:http://mp.wkxz.net/pages/hotel/</p>
                </a-form-model-item>


                <a-form-model-item label="小程序APPID" prop="miniAppId" ref="miniAppId" help="适用于微信小程序发起的支付调用">
                    <a-input v-model="form.miniAppId"
                             placeholder="请填写绑定的微信小程序的APPID"

                             @blur=" () => { $refs.miniAppId.onFieldBlur(); } "/>
                </a-form-model-item>


                <a-form-model-item label="开放平台APPID" prop="openAppId" ref="openAppId" help="适用于微信开放平台的支付调用 一般用于APP开发">
                    <a-input v-model="form.openAppId"
                             placeholder="请填写绑定的微信开放的APPID"
                             @blur=" () => { $refs.openAppId.onFieldBlur(); } "/>
                </a-form-model-item>


                <a-form-model-item :wrapperCol="{ span: 24 }" style="text-align: right">
                    <a-button  :loading="loading" type="primary" @click="onSubmit">
                        保存配置
                    </a-button>
                </a-form-model-item>
            </a-form-model>



        </div>
    </a-card>
</template>
<script>

    import {FindWeixinPayConfig,SaveWeixinPayConfig} from '../public/http';

    export default {
        data() {
            return {
                loading: false,
                isUpdate: false,
                inputSize: "default",
                labelCol: {
                    span: 6
                },
                wrapperCol: {
                    span: 18
                },
                form: {
                    mchName: null,
                    mchId: null,
                    mchKey: null,
                    mpAppId: null,  //公众号APPID
                    miniAppId: null, //小程序APPID
                    openAppId: null, //三方平台APPID

                },

                rules: {
                    mchName:
                        {
                            required: true,
                            message: '请填写微信支付的商户名称',
                            trigger: 'blur'
                        },


                    mchId: {
                        required: true,
                        message: '请填写微信支付的商户号',
                        trigger: 'blur'
                    },

                    mchKey: {
                        required: true,
                        message: '请填写微信支付平台的签名秘钥',
                        trigger: 'blur'
                    }

                },
            };
        },
        methods: {
            async onSubmit() {
                this.$refs.ruleForm.validate(valid => {
                    if (!valid) {
                        return false;
                    }
                    this.loading=true;
                    SaveWeixinPayConfig(this.form).then(res=>{
                        this.$exMod.ajaxMessage(res);
                        this.readConfig();
                    })

                    this.loading=false;
                });
            },



            readConfig() {
                FindWeixinPayConfig().then(res => {
                    if (res.code === 0) {
                        this.form = res.data.result;
                    } else {
                        this.$notification['warning']({
                            message: '配置警告',
                            description:res.message

                        });
                    }

                })
            }
        },
        created() {
            this.readConfig();
        }
    };
</script>

<style>

    .box {
        width: 800px;
        margin: 10px auto;
    }

    .ant-form-item {
        margin-bottom: 20px;
    }
</style>
